<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>热门活动</title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            .q1{
                width: 600px;
                margin: 0 auto;
            }
            .n1{
                float: left;
            }
            .n2{
                float: right;
                color: #5b666b;
            }
            g1{
                font-size: 12px;
            }
            .qn{
                clear: both;
            }
            .q3{
                
                float: left;
                margin: 10px;
            }
            .q5{
                float: left;
                
            }
            p{
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <div class="q1">
            <div class="q2">
                <h3 class="n1">热门活动</h3>
                <h3 class="n2">更多</h3>
            </div>
            <div class="qn">
            <div class="q3">
                <img src="img1.png" />
                <p class="g1">推荐活动 | 原创音乐现金榜T榜</p>               
            </div>
            <div class="q3 q4">
                <img src="img2.png" />
                <p class="g1">推荐节目|《TAImusic》爆笑来袭</p>               
            </div>
            <div class="q3 q5">
                <img src="img3.png" />
                <p class="g1">推荐歌单 | 继续宠爱张国荣</p>               
            </div>
            <div class="q3 q6">
                <img src="img4.png" />
                <p class="g1">推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</p>     
            </div>
            </div>
        </div>
    </body>
</html>